.component {
  position: absolute;
  right: 29px;
  top: 20px;

  .button {
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: 44px;
    position: relative;
    width: 44px;

    &:hover {
      background-color: var(
        --theme-news-feed-icon-toggle-hover-background-color
      );
    }

    &.notificationDot {
      @extend .dot;

      &:after {
        background: var(--theme-news-feed-icon-red-dot-background-color);
      }
    }

    &.updateDot {
      @extend .dot;

      &:after {
        background: var(--theme-news-feed-icon-green-dot-background-color);
      }
    }
  }

  .icon {
    svg {
      height: 22px;
      left: 11px;
      position: absolute;
      top: 10px;
      width: 22px;

      path {
        stroke: var(--theme-news-feed-icon-color);
      }
    }
  }
}

.dot {
  &:after {
    border-radius: 12.5px;
    content: '';
    display: block;
    height: 8px;
    pointer-events: none;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 8px;
  }
}

.tooltip {
  white-space: nowrap;
}
